<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>16 vue组件生命周期</title>
    </head>
    <body>
        <div id="box">
            <child v-if="isCreated"></child>
        </div>

        <script type="text/javascript">
            Vue.component('child', {
                template: `<div id="aaa">
                   child --{{title}}
                  <button @click="title='1111111'">change1</button>
                  <button @click="title='2222222'">change2</button>
              </div>`,

                data() {
                    return {
                        title: '00000',
                        datalist: [],
                        count: 0
                    };
                },

                methods: {},

                beforeCreate() {
                    console.log('beforeCreate');
                },
                created() {
                    console.log('created');
                },

                beforeMount() {
                    console.log('beforeMount');
                },

                mounted() {
                    console.log('mounted', '访问dom,setInterval,window.onscroll, 监听事件 ajax');
                },

                beforeUpdate() {
                    console.log('beforeUpdate');
                },

                updated() {
                    console.log('updated', '更新之后可以访问dom');
                },

                beforeDestroy() {
                    console.log('beforeDestroy-clearInterval ,window.onscroll=null,$off');
                },

                destroyed() {
                    console.log('destroyed--clearInterval ,window.onscroll=null,$off');
                }
            });

            var vm = new Vue({
                el: '#box',
                data: {
                    isCreated: true
                }
            });
        </script>
    </body>
</html>
